import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import ApproveIcon from '../../../assets/images/approve.svg'
import RejectIcon from '../../../assets/images/reject.svg'
import JudgingIcon from '../../../assets/images/judging.svg'
import CancelIcon from '../../../assets/images/cancel.svg'

export enum TaskStatusEnum {
    NOT_START = -1,    // 未开始
    WAIT = 0,          // 待审批
    RUNNING = 1,       // 审批中
    APPROVE = 2,       // 审批通过
    REJECT = 3,        // 审批不通过
    CANCEL = 4,        // 已取消
    RETURN = 5,        // 已退回
    APPROVING = 7      // 审批通过中
}

interface StatusIconProps {
    status: TaskStatusEnum | number
    size?: number
    showText?: boolean
    textStyle?: any
}

const StatusIcon: React.FC<StatusIconProps> = ({ 
    status, 
    size = 24, 
    showText = true, 
    textStyle 
}) => {
    const getStatusConfig = () => {
        switch (status) {
            case TaskStatusEnum.APPROVE:
                return {
                    icon: <ApproveIcon width={size} height={size} />,
                    text: '已通过',
                    color: '#52c41a'
                }
            case TaskStatusEnum.REJECT:
                return {
                    icon: <RejectIcon width={size} height={size} />,
                    text: '未通过',
                    color: '#ff4d4f'
                }
            case TaskStatusEnum.RUNNING:
            case TaskStatusEnum.WAIT:
            case TaskStatusEnum.APPROVING:
                return {
                    icon: <JudgingIcon width={size} height={size} />,
                    text: '审批中',
                    color: '#1890ff'
                }
            case TaskStatusEnum.CANCEL:
                return {
                    icon: <CancelIcon width={size} height={size} />,
                    text: '已取消',
                    color: '#8c8c8c'
                }
            case TaskStatusEnum.RETURN:
                return {
                    icon: <RejectIcon width={size} height={size} />,
                    text: '已退回',
                    color: '#fa8c16'
                }
        }
    }

    const config = getStatusConfig()

    return (
        <View style={styles.container}>
            {config.icon}
            {showText && (
                <Text style={[
                    styles.statusText, 
                    { color: config.color },
                    textStyle
                ]}>
                    {config.text}
                </Text>
            )}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    statusText: {
        fontSize: 14,
        fontWeight: '500',
        marginLeft: 8,
    },
})

export default StatusIcon
